
import {Breadcrumb, Layout, theme} from 'antd';
import { Outlet} from "react-router-dom";
import {useState} from 'react'

const {Header, Content, Footer, Sider} = Layout;
import MyMenu from '../components/menu'

const App: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);

    //路由点击跳转
    const {
        token: {colorBgContainer, borderRadiusLG},
    } = theme.useToken();
    return (
        <Layout style={{minHeight: '100vh'}}>
            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                <div className="demo-logo-vertical">
                    <img src='https://photo.16pic.com/00/78/86/16pic_7886121_b.jpg'/>
                </div>
               <MyMenu/>
            </Sider>
            <Layout>
                <Header style={{padding: 0, background: colorBgContainer}}>
                    <div className='headBox'>
                        <Breadcrumb style={{margin: '16px 0'}}>
                            <Breadcrumb.Item>User</Breadcrumb.Item>
                            <Breadcrumb.Item>Bill</Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                </Header>
                <Content style={{margin: '5px 16px'}}>
                    <Outlet/>
                </Content>
                <Footer style={{textAlign: 'center'}}>
                    Ant Design ©{new Date().getFullYear()} Created by Ant UED
                </Footer>
            </Layout>
        </Layout>
    );
};

export default App;
